<template>
    <div class="financialComplaint">
        <div class="attention">
            <p class="title">注意：</p>
            <div class="news">
                <p>1、每月15（变量）日结算上月收入</p>
                <p>2、对有异议的订单，随时都可以申诉，每月10停止对上月订单的申诉</p>
            </div>
        </div>
        <div class="search">
            <div class="search-inp-box">
                <div>
                    <div class="item-box">
                        <span class="search-text">订单编号</span>
                        <input v-model="orderNoValue" type="text" name="" id="" placeholder="请输入订单编号">
                    </div>
                    <div class="item-box">
                        <span class="search-text">日期</span>
                        <el-date-picker v-model="dateVuale"  type="datetimerange"  range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
                        <!-- <el-date-picker  v-model="dateVuale"  type="date"  placeholder="选择日期"></el-date-picker> -->
                    </div>
                </div>
                <div>
                    <div class="item-box">
                        <span class="search-text">状态</span>
                        <el-select v-model="searchvalue2" placeholder="请选择">
                            <el-option  v-for="item in searchoptions2"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search-btn">
                <span class="my-btn" @click="searchClick" :class="colorBlue == 0?'my-back-blue':''" @mousemove="mouseMove(0)">筛选</span>
                <span class="btn" @click="emptyClick" :class="colorBlue == 1?'my-back-blue':''" @mousemove="mouseMove(1)">清空</span>
                <!-- <span class="btn" @click="exportClick" :class="colorBlue == 2?'my-back-blue':''" @mousemove="mouseMove(2)">导出</span> -->
            </div>
        </div>
        <div class="tab-one" v-if="ComplaintData">
            <el-table :data="ComplaintData.list" stripe border style="width: 100%">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column  prop="orderNo"  label="订单编号"></el-table-column>
                <el-table-column  prop="createTime"  label="日期"></el-table-column>
                <el-table-column  prop="price"  label="金额" width="90"></el-table-column>
                <el-table-column  label="结算状态" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.settleState==0">未结算</span>
                        <span v-if="scope.row.settleState==1">已结算</span>
                    </template>
                </el-table-column>
                <el-table-column  label="申诉状态" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==0">未处理</span>
                        <span v-if="scope.row.state==1">已处理</span>
                    </template>
                </el-table-column>
                <el-table-column  fixed="right"  label="操作"  width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="tab-bottom">
                <!-- <div style="margin-left:5px;color:#444;"><span>上月营业额：329345.00 元</span></div> -->
                <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total="ComplaintData.total"></el-pagination>
            </div>
            <!-- 弹窗 -->
            <div class="mask" v-show="masknum">
                <div class="content">
                    <p class="content-top">
                        <span>详情</span>
                        <span @click="masknum=false"><img src="../assets/img/error.png" alt=""></span>
                    </p>
                    <div class="item">
                        <span>订单编号：</span>
                        <span>{{detailsData.orderNo}}</span>
                    </div>
                    <div class="item">
                        <span>日期：</span>
                        <span>{{detailsData.createTime}}</span>
                    </div>
                    <div class="item">
                        <span>金额：</span>
                        <span>{{detailsData.price}}</span>
                    </div>
                    <div class="item">
                        <span>申诉原因：</span>
                        <span>{{detailsData.appealRemarks}}</span>
                    </div>
                    <div class="item">
                        <span>平台回复：</span>
                        <span>
                            <textarea v-model="detailsData.reply"></textarea>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            colorBlue:0,
            masknum:false,//弹窗
            detailsData:'',//弹窗数据
            orderNoValue:'',//编号值
            searchvalue1:'',//来源选中值
            searchvalue2:'',//状态选中值
            dateVuale:'',//日期选中值
            searchoptions1:[//来源选择数据
                {label:'北',value:'选项1'},
                {label:'京',value:'选项2'},
                {label:'烤',value:'选项3'},
                {label:'鸭',value:'选项4'}
            ],
            searchoptions2:[//状态选择数据
                {label:'已结算',value:1},
                {label:'未结算',value:0},
            ],
            ComplaintData:'',//商户财务报表数据
            //分页
            currentPage4:1,//跳转到第几页
            page:1,//第几页
            pageSize:5,//每页几条
        }
    },
    mounted(){
        this.getComplaintData()
    },
    methods:{
        //切换按钮样式
        mouseMove(index) {
            this.colorBlue = index;
        },
        //获取商户财务报表数据
        getComplaintData(){
            var param={
                "page": this.page,
                "pageSize": this.pageSize,
                "createTime": this.dateVuale[0],
                "createTimeNew": this.dateVuale[1],
                "orderNo": this.orderNoValue,
                "settleState": this.searchvalue2
            }
            this.axios({
                url:'/finance/getAppaelAll',
                method:'post',
                data:JSON.stringify(param),
            }).then(res=>{
                this.ComplaintData=res.data.data
            })
        },
        //搜索
        searchClick(){
            this.getComplaintData()
        },
        //清空
        emptyClick(){
            this.orderNoValue=''
            this.searchvalue1=''
            this.searchvalue2=''
            this.dateVuale=''
            this.getComplaintData()
        },
        //详情
        handleClick(row){
            this.masknum=true
            this.detailsData=row
            console.log('row',row)
        },
        //分页
        handleSizeChange(val) {
            this.pageSize=val
            this.getComplaintData()
        },
        handleCurrentChange(val) {
            this.page=val
            this.getComplaintData()
        }
    },
    watch:{
        
    }
}
</script>

<style scoped>
/* 注意 */
.attention{
    font-size: 14px;
    display: flex;
    margin-top: 15px;
    padding-left: 5px;
}
.attention .title{
    padding-right: 4px;
}
.attention .news p{
    margin-bottom: 7px;
}
/* 搜索 */
.search{
    display: flex;
    justify-content: space-between;
    padding: 5px;
    padding-top: 30px;
    margin-bottom: 30px;
}
.search-inp-box{
    display: flex;
    width: calc(100% - 220px);
    flex-wrap: wrap;
}
.item-box{
    margin: 8px 0;
}
.search-text{
    display: inline-block;
    width: 75px;
    text-align: right;
    padding-right: 15px;
    font-size: 15px;
    color: #555;
}
.search-btn{
    margin-top: 6px;
    width: 210px;
}
.search-btn span{
    font-size: 15px;
    display: inline-block;
    padding: 6px 14px;
    margin: 0 5px;
    border-radius: 2px;
    cursor:pointer;
}
.btn{
    border: 1px solid #ddd;
}
.tab-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.el-pagination{
    margin-top: 00px;
}
</style>
<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
}
.mask .content{
    width: 500px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.mask .content-top img{
    width: 25px;
}
.mask .item{
    margin-bottom: 20px;
}
.mask .item:last-child{
    display: flex;
    align-items: flex-start;
}
.mask .item span:first-child{
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 12px;
}
textarea{
    padding: 5px;
    width: 250px;
    height: 70px;
}
</style>